<template>
    <view
        class="pages"
        :class="themeName"
        :style="
            'background-image: url(' +
            $getImageUri('resource/image/shopapi/default/login_bg.png') +
            ')'
        "
    >
        <view class="register">
            <u-navbar :is-back="true" :background="{ background: `rgba(256,256,256,0)` }">
            </u-navbar>
            <view class="input-container">
                <view
                    class="font-size-38"
                    style="font-weight: 500; margin-top: 80rpx; margin-bottom: 60rpx"
                    >注册新账号</view
                >
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="手机号"
                        v-model="register.mobile"
                        placeholder="请输入手机号"
                        :input-border="false"
                    />
                </view>
                <view class="input" v-if="isRegisterCode">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="短信验证码"
                        v-model="register.code"
                        placeholder="请输入验证码"
                        :input-border="false"
                    >
                        <view slot="right">
                            <view class="sms-btn" @tap="sendSMS">
                                <!-- 获取验证码 -->
                                <u-verification-code
                                    unique-key="login"
                                    ref="uCode"
                                    @change="codeChange"
                                >
                                </u-verification-code>
                                <view class="garyTipsText p-l-20">{{ codeTips }}</view>
                            </view>
                        </view>
                    </u-field>
                </view>
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="设置密码"
                        type="password"
                        v-model="register.password"
                        placeholder="请输入密码"
                        :input-border="false"
                    />
                </view>
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="确认密码"
                        type="password"
                        v-model="register.password_confirm"
                        placeholder="请确认密码"
                        :input-border="false"
                    />
                </view>
            </view>
            <button class="register-btn white m-b-40" size="lg" @tap="registerFun">注册</button>

            <u-checkbox
                v-model="isAgree"
                :active-color="themeColor"
                shape="circle"
                :label-disabled="true"
            >
                <view class="sm flex row-center">
                    已阅读并同意
                    <router-link to="/bundle/pages/server_explan/server_explan?type=1">
                        <view class="agreement">《服务协议》</view>
                    </router-link>
                    和
                    <router-link to="/bundle/pages/server_explan/server_explan?type=2">
                        <view class="agreement">《隐私协议》</view>
                    </router-link>
                </view>
            </u-checkbox>
        </view>
    </view>
</template>

<script>
import { apiRegisterCaptcha, apiAccountRegister } from '@/api/app'
import { mapGetters } from 'vuex'
import { trottle } from '@/utils/tools'
export default {
    name: 'register',
    data() {
        return {
            register: {
                mobile: '',
                code: '',
                password: '',
                password_confirm: ''
            },
            codeTips: '',
            isAgree: false // 是否同意协议
        }
    },
    methods: {
        codeChange(tip) {
            this.codeTips = tip
        },
        registerFun() {
            let { mobile, password, code, password_confirm } = this.register
            if (!mobile) {
                this.$toast({
                    title: '请输入手机号'
                })
                return
            }
            if (!password) {
                this.$toast({
                    title: '请输入密码'
                })
                return
            }
            if (!password) {
                this.$toast({
                    title: '请再次输入密码'
                })
                return
            }
            if (password != password_confirm) {
                this.$toast({
                    title: '两次密码输入不一致'
                })
                return
            }
            if (!this.isAgree) {
                this.$toast({ title: '请阅读并同意《服务协议》《隐私协议》' })
                return
            }
            apiAccountRegister(this.register).then((res) => {
                setTimeout(() => {
                    this.$Router.back(1)
                }, 1500)
            })
        },
        sendSMS() {
            if (!this.$refs.uCode.canGetCode) return
            if (!this.register.mobile) {
                this.$toast({
                    title: '请输入手机号'
                })
                return
            }
            apiRegisterCaptcha({
                mobile: this.register.mobile
            }).then((res) => {
                this.$refs.uCode.start()
            })
        }
    },
    computed: {
        isRegisterCode() {
            const { is_mobile_register_code } = this.appConfig
            return is_mobile_register_code
        }
    },
    onLoad() {
        this.registerFun = trottle(this.registerFun)
    }
}
</script>

<style lang="scss">
.register {
    padding: 0rpx 60rpx;

    .input {
        height: 100rpx;
        display: flex;
        align-items: center;
        border: 1px solid #d7d7d7;
        border-radius: 12rpx;
        margin-bottom: 40rpx;
    }

    .sms-btn {
        border-left: $-solid-border;

        // text-align: center;
        // border: 1px solid;
        // width: 176rpx;
        // height: 60rpx;
        // line-height: 60rpx;
        // border-radius: 60rpx;
        // @include font_color();
        // @include border_color();
        .garyTipsText {
            color: #888888;
        }
    }

    .register-btn {
        height: 100rpx;
        line-height: 100rpx;
        margin-top: 60rpx;
        @include background_color();
    }

    .agreement {
        @include font_color;
    }
}
</style>
